<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自定事件---子组件向父组件传递数据</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <p>在父组件中使用 my-component 并没有使用 @input=“handleGetTotal”，而是直接使用 v-model 绑定一个数据 total, 这也可以称作是一个语法糖，因为间接的可以用自定义事件来实现。</p>
        <my-component v-model="total"></my-component>

        <p>父组件的值{{total}}</p>
    </div>
</body>

<script type="text/javascript">
    // 注册组件
    Vue.component('my-component', {
        template:'<div><button @click="handleIncrease"> +1 </button><button @click="handleReduce"> -1 </button>        <p>子组件的值: {{counter}} </p></div>',
        data: function(){
            return {
                counter: 0
            };
        },
        methods:{
            handleIncrease: function(){
                this.counter++;
                this.$emit('input', this.counter);
            },
            handleReduce: function(){
                this.counter--;
                this.$emit('input', this.counter);
            }
        }
    });

    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app",
        data:{
            total:0
        }
    })
</script>

</html>